<template>
  <div class="screen">
    <div class="underlayer_wrapper" v-show="false">
      <div class="bd"></div>
    </div>
    <div class="upperlayer_wrapper">
      <div class="wrapper-top">
        <div class="main-title"><span>{{ config.title }}</span></div>
        <div class="menus" v-if="config.headerMenu.show===true"
             :style="{height:config.headerMenu.menus.length>0||config.headerMenu.show===true?'':'10px'}">
          <a v-if="config.headerMenu.menus.length%2===1" class="left-menu" href="#"><span></span></a>
          <a v-for="(menu,menuIndex) in config.headerMenu.menus"
             :class="[
                 {'left-menu':(menuIndex<config.headerMenu.menus.length/2)},
                 {'right-menu':(menuIndex>=config.headerMenu.menus.length/2)}
                 ]"
             :href="menu.href">{{ menu.text }}</a>
        </div>
        <div class="login" v-if="topLogin.isLogin">
          <a class="login-btn" type="login">{{ topLogin.rname }}</a>
          <a class="login-btn" type="split">|</a>
          <a class="login-btn" type="logout" @click="logout">注销</a>
        </div>
      </div>
      <div class="wrapper-left"></div>
      <div class="wrapper-right"></div>
      <div class="wrapper" :style="{top:config.headerMenu.menus.length>0||config.headerMenu.show===true?'':'60px'}">
        <div class="container-fluid">
          <div class="fill-h xpanel-wrapper">
            <wrapper-item v-for="wrapperItem in config.wrapper" :item="wrapperItem"></wrapper-item>
          </div>
          <div class="row">
            <div class="wrapper-bottom"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WrapperItem from "@/components/bigScreen/xWrapper/wrapperItem";
import cc from "@/components/bigScreen/js/commonConfig";

export default {
  name: "configScreen",
  components: {WrapperItem},
  data() {
    return {
      topLogin: {
        key: "screen",//存储当前登录系统的标识
        isLogin: false,
        rname: "未登录"
      },
      config: {
        title: "综合大屏展示系统1",
        headerMenu: {
          show: false,
          menus: [
            {text: "系统1", href: "#"},
            {text: "系统2", href: "#"},
            {text: "系统3", href: "#"},
            {text: "系统4", href: "#"},
            {text: "系统3", href: "#"},
            {text: "系统4", href: "#"},
          ]
        },
        wrapper: [
          {
            type: "wrapper", //容器块标识 wrapper:容器;xlabel-part:文本段落;xchart-wrapper:图表;xlabel-wrapper:纯文本;map:地图;xMoni:指标
            width: "20%",
            height: "100%",
            spacing: {
              row: true
            },
            autoFixWidth: true, //窗口缩小时是否填满宽度，默认为false
            wrapper: [
              {
                type: "wrapper", //容器块标识
                border: {
                  show: true,
                  borderType: "border2"//边框类型：border1 有边框，border2: 带棱角边框
                },
                width: "100%",
                height: "25%",
                spacing: {
                  col: true
                },
                title: "监测情况",
                wrapper: [{
                  type: "xlabel-part", //段落标识
                  width: "100%",
                  height: "100%",
                  scrolling: {
                    y: true
                  },
                  innerHtml: '<p>截止<a><span class="label-value" type="jc-year">2020年底</span></a>,国土空间整体开发强度为<a><span class="label-value" type="jc-gtkfqd">2.5%</span></a>，三类空间占比为<a><span class="label-value" type="jc-slkjzb1">50%</span></a>:<a><span class="label-value" type="jc-slkjzb2">30%</span></a>:<a><span class="label-value" type="jc-slkjzb3">20%</span></a>。</p>'
                      + '<p>耕地保有量为<a><span class="label-value" type="jc-gdbyl">300万亩</span></a>,城镇建设用地规模为<a><span class="label-value" type="jc-czjsydgm">2000km²</span></a>，森林覆盖率为<a><span class="label-value" type="jc-slfgl">44%</span></a>，水质达标率为<a><span class="label-value" type="jc-szdbl">90%</span></a>。</p>'
                }]
              },
              {
                type: "wrapper", //容器标识，带标题
                border: {
                  show: true,
                  borderType: "border2"
                },
                width: "100%",
                height: "25%",
                spacing: {
                  col: true
                },
                title: "三线管控",
                wrapper: [
                  {
                    type: "wrapper",
                    width: "33%",
                    height: "100%",
                    wrapper: [
                      {
                        type: "xchart-wrapper", //图表标识
                        width: "100%",
                        height: "80%",
                        chartOption: {
                          type: "liquidfill",
                          color: cc.colors.greenRed,
                          data: [0.47, 0.42, 0.37]
                        }
                      },
                      {
                        type: "xlabel-wrapper", //文本标识
                        width: "100%",
                        height: "20%",
                        labelStyle: {type: "title2"},
                        labelOption: {
                          title: "生态空间",
                          trend: {
                            show: true,
                            type: "down"
                          }
                        }
                      }
                    ]
                  },
                  {
                    type: "wrapper",
                    width: "33%",
                    height: "100%",
                    wrapper: [
                      {
                        type: "xchart-wrapper", //图表标识
                        width: "100%",
                        height: "80%",
                        chartOption: {
                          type: "liquidfill",
                          color: cc.colors.redHigh,
                          data: [0.55, 0.45, 0.35]
                        }
                      },
                      {
                        type: "xlabel-wrapper", //文本标识
                        width: "100%",
                        height: "20%",
                        labelStyle: {type: "title2"},
                        labelOption: {
                          title: "城镇空间",
                          trend: {
                            show: true,
                            type: "up"
                          }
                        }
                      }
                    ]
                  },
                  {
                    type: "wrapper",
                    width: "33%",
                    height: "100%",
                    wrapper: [
                      {
                        type: "xchart-wrapper", //图表标识
                        width: "100%",
                        height: "80%",
                        chartOption: {
                          type: "liquidfill",
                          color: cc.colors.yellowHigh,
                          data: [0.70, 0.60, 0.50]
                        }
                      },
                      {
                        type: "xlabel-wrapper", //文本标识
                        width: "100%",
                        height: "20%",
                        labelStyle: {type: "title2"},
                        labelOption: {
                          title: "农业空间",
                          trend: {
                            show: true,
                            type: "down"
                          }
                        }
                      }
                    ]
                  }
                ]
              },
              {
                type: "wrapper", //容器标识，带标题
                border: {
                  show: true,
                  borderType: "border2"
                },
                width: "100%",
                height: "50%",
                spacing: {
                  col: true
                },
                scrolling: {
                  y: true
                },
                title: "土地开发利用",
                wrapper: [
                  {
                    type: "wrapper",
                    height: "33%",
                    width: "100%",
                    wrapper: [
                      {
                        type: "xlabel-wrapper",
                        width: "100%",
                        icon: true,
                        labelOption: {
                          title: "城乡用地",
                          value: "800",
                          unit: "km²",
                          trend: {
                            show: true,
                            type: "up"
                          }
                        }
                      },
                      {
                        type: "wrapper",
                        width: "100%",
                        height: "100%",
                        wrapper: [
                          {
                            type: "xchart-wrapper", //图表标识
                            width: "50%",
                            height: "100%",
                            chartOption: {
                              type: "ringPercent",
                              color: cc.colors.standard2,
                              data: [{
                                name: "2018年",
                                value: 45
                              }]
                            }
                          },
                          {
                            type: "xchart-wrapper", //图表标识
                            width: "50%",
                            height: "100%",
                            chartOption: {
                              type: "ringPercent",
                              color: cc.colors.standard2,
                              data: [{
                                name: "2019年",
                                value: 56
                              }]
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    type: "wrapper",
                    height: "33%",
                    width: "100%",
                    wrapper: [
                      {
                        type: "xlabel-wrapper",
                        width: "100%",
                        icon: true,
                        labelOption: {
                          title: "城市用地",
                          value: "2000",
                          unit: "km²",
                          trend: {
                            show: true,
                            type: "up"
                          }
                        }
                      },
                      {
                        type: "wrapper",
                        width: "100%",
                        height: "100%",
                        wrapper: [
                          {
                            type: "xchart-wrapper", //图表标识
                            width: "50%",
                            height: "100%",
                            chartOption: {
                              type: "ringPercent",
                              color: cc.colors.standard2,
                              data: [{
                                name: "2018年",
                                value: 37
                              }]
                            }
                          },
                          {
                            type: "xchart-wrapper", //图表标识
                            width: "50%",
                            height: "100%",
                            chartOption: {
                              type: "ringPercent",
                              color: cc.colors.standard2,
                              data: [{
                                name: "2019年",
                                value: 83
                              }]
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    type: "wrapper",
                    height: "33%",
                    width: "100%",
                    wrapper: [
                      {
                        type: "xlabel-wrapper",
                        width: "100%",
                        icon: true,
                        labelOption: {
                          title: "建设用地",
                          value: "1350",
                          unit: "km²",
                          trend: {
                            show: true,
                            type: "up"
                          }
                        }
                      },
                      {
                        type: "wrapper",
                        width: "100%",
                        height: "100%",
                        wrapper: [
                          {
                            type: "xchart-wrapper", //图表标识
                            width: "50%",
                            height: "100%",
                            chartOption: {
                              type: "ringPercent",
                              color: cc.colors.standard2,
                              data: [{
                                name: "2018年",
                                value: 60
                              }]
                            }
                          },
                          {
                            type: "xchart-wrapper", //图表标识
                            width: "50%",
                            height: "100%",
                            chartOption: {
                              type: "ringPercent",
                              color: cc.colors.standard2,
                              data: [{
                                name: "2019年",
                                value: 78
                              }]
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            type: "wrapper",
            width: "60%",
            height: "100%",
            autoFixWidth: true, //窗口缩小时是否填满宽度，默认为false
            spacing: {
              row: true
            },
            wrapper: [
              {
                type: "wrapper",
                width: "100%",
                height: "10%",
                spacing: {
                  col: true
                },
                wrapper: [
                  {
                    key:"GDBYL",
                    type: "xMoni",
//                            border: {
//                                show: true,
//                                borderType: "border1"
//                            },
                    width: "25%",
                    height: "100%",
                    spacing: {
                      row: true
                    },
                    labelOption: {
                      title: "耕地保有量",
                      value: "54213",
                      level: "green",
                      unit: "km²"
                    }
                  },
                  {
                    key:"JBNT",
                    type: "xMoni",
                    border: {
                      show: true,
                      borderType: "border1"
                    },
                    width: "25%",
                    height: "100%",
                    spacing: {
                      row: true
                    },
                    labelOption: {
                      title: "基本农田面积",
                      value: "12000",
                      level: "red",
                      unit: "km²"
                    }
                  },
                  {
                    key:"CQMJ",
                    type: "xMoni",
                    border: {
                      show: true,
                      borderType: "border1"
                    },
                    width: "25%",
                    height: "100%",
                    spacing: {
                      row: true
                    },
                    labelOption: {
                      title: "城区面积",
                      value: "542",
                      level: "red",
                      unit: "km²"
                    }
                  },
                  {
                    key:"JSYC",
                    type: "xMoni",
                    border: {
                      show: true,
                      borderType: "border1"
                    },
                    width: "25%",
                    height: "100%",
                    spacing: {
                      row: true
                    },
                    labelOption: {
                      title: "建设用地",
                      value: "1245",
                      level: "yellow",
                      unit: "km²"
                    }
                  }
                ]
              },
              {
                type: "wrapper",
                width: "100%",
                height: "90%",
                spacing: {
                  col: true
                },
                wrapper: [
                  {
                    type: "wrapper",
                    width: "75%",
                    height: "100%",
                    border: {
                      show: true,
                      borderType: "border3"
                    },
                    spacing: {
                      row: true
                    },
                    wrapper: [
                      {
                        type: "map",
                        width: "100%",
                        height: "100%"
                      }
                    ]
                  },
                  {
                    type: "wrapper",
                    width: "25%",
                    height: "100%",
                    spacing: {
                      row: true
                    },
                    wrapper: [
                      {
                        type: "wrapper",
                        width: "100%",
                        height: "30%",
                        border: {
                          show: true,
                          borderType: "border1"
                        },
                        spacing: {
                          col: true
                        },
                        scrolling: {
                          y: true
                        },
                        wrapper: [
                          {
                            type: "xlabel-wrapper",
                            width: "100%",
                            labelStyle: {type: "title1"},
                            icon: true,
                            labelOption: {
                              title: "基本农田面积"
                            }
                          }, {
                            type: "xlabel-wrapper",
                            width: "100%",
                            labelStyle: {type: "title1"},
                            labelOption: {
                              rightTitle: "旱地",
                              value: "12000",
                              level: "yellow",
                              unit: "km²",
                              trend: {
                                show: true,
                                type: "up"
                              }
                            }
                          }, {
                            type: "xlabel-wrapper",
                            width: "100%",
                            labelStyle: {type: "title1"},
                            labelOption: {
                              rightTitle: "水田",
                              value: "1060",
                              level: "yellow",
                              unit: "km²",
                              trend: {
                                show: true,
                                type: "up"
                              }
                            }
                          }, {
                            type: "xlabel-wrapper",
                            width: "100%",
                            labelStyle: {type: "title1"},
                            labelOption: {
                              rightTitle: "水浇地",
                              value: "70",
                              level: "yellow",
                              unit: "km²",
                              trend: {
                                show: true,
                                type: "up"
                              }
                            }
                          }, {
                            type: "xlabel-wrapper",
                            width: "100%",
                            labelStyle: {type: "title1"},
                            icon: true,
                            labelOption: {
                              title: "森林面积"
                            }
                          }, {
                            type: "xlabel-wrapper",
                            width: "100%",
                            labelStyle: {type: "title1"},
                            labelOption: {
                              rightTitle: "乔木",
                              value: "12000",
                              level: "yellow",
                              unit: "km²",
                              trend: {
                                show: true,
                                type: "up"
                              }
                            }
                          }, {
                            type: "xlabel-wrapper",
                            width: "100%",
                            labelStyle: {type: "title1"},
                            labelOption: {
                              rightTitle: "灌木",
                              value: "1060",
                              level: "yellow",
                              unit: "km²",
                              trend: {
                                show: true,
                                type: "up"
                              }
                            }
                          }, {
                            type: "xlabel-wrapper",
                            width: "100%",
                            labelStyle: {type: "title1"},
                            labelOption: {
                              rightTitle: "混合林",
                              value: "70",
                              level: "yellow",
                              unit: "km²",
                              trend: {
                                show: true,
                                type: "up"
                              }
                            }
                          }
                        ]
                      },
                      {
                        title: "产业经济",
                        type: "wrapper",
                        width: "100%",
                        height: "40%",
                        border: {
                          show: true,
                          borderType: "border1"
                        },
                        spacing: {
                          col: true
                        },
                        wrapper: [
                          {
                            type: "xlabel-wrapper",
                            width: "100%",
                            labelStyle: {type: "title1"},
                            labelOption: {
                              //button控制相邻的图表内容显示
                              button: [
                                {name: "构成比例", selected: true, key: "pie_cygcbl"},
                                {name: "产值总览", key: "bar_cyczzl"},
                                {name: "指标完成率", key: "gauge_cyzbwcl"}
                              ]
                            }
                          },
                          {
                            key: "pie_cygcbl",
                            type: "xchart-wrapper",
                            width: "100%",
                            height: "90%",
                            chartOption: {
                              type: "pie",
                              color: cc.colors.yellowHigh,
                              legend: {
                                orient: 'vertical',
                                x: "right",
                                y: "bottom"
                              },
                              series: [
                                {
                                  name: '产业构成比例',
                                  type: 'pie',
                                  radius: '30%',
                                  labelLineShow:true,
                                  data: [
                                    {value: 39, name: '第一产业'},
                                    {value: 42, name: '第二产业'},
                                    {value: 19, name: '第三产业'}
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            key: "bar_cyczzl",
                            type: "xchart-wrapper",
                            width: "100%",
                            height: "90%",
                            hidden: true,
                            chartOption: {
                              type: "bar",
                              color: cc.colors.yellowHigh,
                              axis: {
                                axisType: "x",
                                name: "亿元",
                                data: (function () {
                                  var res = [];
                                  for (var i = 0; i <= 9; i++) {
                                    var year = 2010 + i;
                                    res.push(year + '年');
                                  }
                                  return res;
                                })()
                              },
                              series: [
                                {
                                  name: '第一产业',
                                  type: 'bar',
                                  stack: '总量',
                                  data: [2354, 2546, 2789, 3045, 3324, 3857, 4324, 4922, 5312, 5721]
                                },
                                {
                                  name: '第二产业',
                                  type: 'bar',
                                  stack: '总量',
                                  data: [2812, 3240, 3687, 4024, 4312, 4532, 4751, 5045, 5435, 5845]
                                },
                                {
                                  name: '第三产业',
                                  type: 'bar',
                                  stack: '总量',
                                  data: [1024, 1204, 1502, 1845, 2099, 2445, 2699, 2912, 3245, 3612]
                                }
                              ]
                            }
                          },
                          {
                            key: "gauge_cyzbwcl",
                            type: "xchart-wrapper",
                            width: "100%",
                            height: "90%",
                            hidden: true,
                            chartOption: {
                              type: "gauge",
                              series: [{value: 70, name: '使用率'}]
                            }
                          }
                        ]
                      },
                      {
                        type: "wrapper",
                        width: "100%",
                        height: "30%",
                        border: {
                          show: true,
                          borderType: "border1"
                        },
                        spacing: {
                          col: true
                        },
                        wrapper: [
                          {
                            type: "xchart-wrapper",
                            width: "100%",
                            height: "100%",
                            chartOption: {
                              title: "人口结构",
                              type: "ring",
                              color: cc.colors.yellowHigh,
                              legend: {
                                orient: 'vertical',
                                x: "right",
                                y: "bottom"
                              },
                              series: [
                                {
                                  name: '年龄段比例',
                                  type: 'pie',
                                  center: ['50%', '40%'],
                                  radius: ['35%', '50%'],
                                  data: [
                                    {value: 25, name: '0-15岁'},
                                    {value: 48, name: '16-59岁'},
                                    {value: 27, name: '60岁以上'}
                                  ]
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            type: "wrapper",
            width: "20%",
            height: "100%",
            autoFixWidth: true, //窗口缩小时是否填满宽度，默认为false
            spacing: {
              row: true
            },
            wrapper: [
              {
                type: "wrapper",
                border: {
                  show: true,
                  borderType: "border2"
                },
                width: "100%",
                height: "50%",
                spacing: {
                  col: true
                },
                title: "自然资源",
                wrapper: [{
                  type: "xchart-wrapper",
                  width: "100%",
                  height: "100%",
                  toolBox: {
                    item: [
                      // {type:"layer",title:"图层"},
                      // {type:"bookmark",title:"书签"},
                      // {type:"measureLen",title:"量距"},
                      // {type:"measureArea",title:"量面积"},
                      // {type:"identify",title:"查询"},
                      // {type:"spatialQuery",title:"空间查询"},
                      {type: "full-screen", title: "全屏"}
                    ]
                  },
                  chartOption: {
                    type: "bar",
                    color: cc.colors.yellowHigh,
                    axis: {
                      axisType: "y",
                      name: "单位：万公顷",
                      data: ['农田', '森林', '草地', '水域湿地', '居民地', '工矿'],
                      splitLine: {
                        lineStyle: {
                          color: cc.colors.standard2[0],
                          type: 'dotted'
                        }
                      }
                    },
                    series: [
                      {
                        name: '2018年',
                        type: 'bar',
                        label: {
                          color: '#fff',
                          show: true,
                          position: 'right'
                        },
                        data: [450, 610, 220, 75, 50, 35]
                      }, {
                        name: '2019年',
                        type: 'bar',
                        label: {
                          color: '#fff',
                          show: true,
                          position: 'right'
                        },
                        data: [460, 640, 210, 76, 60, 40]
                      }
                    ]
                  }
                }]
              },
              {
                type: "wrapper",
                border: {
                  show: true,
                  borderType: "border3"
                },
                width: "100%",
                height: "50%",
                spacing: {
                  col: true
                },
                scrolling: {
                  y: true
                },
                title: "生态环境",
                wrapper: [
                  {
                    type: "wrapper",
                    height: "50%",
                    width: "100%",
                    wrapper: [
                      {
                        type: "xlabel-wrapper",
                        width: "100%",
                        icon: true,
                        labelOption: {
                          title: "大气质量"
                        }
                      },
                      {
                        type: "wrapper",
                        width: "100%",
                        height: "100%",
                        wrapper: [
                          {
                            type: "xchart-wrapper", //图表标识
                            width: "100%",
                            height: "100%",
                            chartOption: {
                              type: "radar",
                              color: cc.colors.yellowHigh,
                              axis: {
                                data: (function () {
                                  var res = [];
                                  for (var i = 1; i <= 12; i++) {
                                    res.push({text: i + '月', max: 500});
                                  }
                                  return res;
                                })(),
                                radius: '60%'
                              },
                              series: [
                                {
                                  data: [251, 205, 178, 153, 143, 82, 61, 40, 70, 124, 310, 354]
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    type: "wrapper",
                    height: "50%",
                    width: "100%",
                    wrapper: [
                      {
                        type: "xlabel-wrapper",
                        width: "100%",
                        icon: true,
                        labelOption: {
                          title: "水环境"
                        }
                      },
                      {
                        type: "wrapper",
                        width: "100%",
                        height: "100%",
                        wrapper: [
                          {
                            type: "xchart-wrapper", //图表标识
                            width: "100%",
                            height: "100%",
                            chartOption: {
                              type: "radar",
                              color: cc.colors.yellowHigh,
                              axis: {
                                data: [
                                  {text: '降水量', max: 2000},
                                  {text: '蒸发量', max: 2000},
                                  {text: '地表径流', max: 100},
                                  {text: '水源涵养', max: 100},
                                  {text: '水质', max: 100}
                                ],
                                radius: '60%'
                              },
                              series: [
                                {
                                  name: "黑龙江省",
                                  data: [1500, 1200, 78, 60, 90]
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    type: "wrapper",
                    height: "50%",
                    width: "100%",
                    wrapper: [
                      {
                        type: "xlabel-wrapper",
                        width: "100%",
                        icon: true,
                        labelOption: {
                          title: "土壤质量"
                        }
                      },
                      {
                        type: "wrapper",
                        width: "100%",
                        height: "100%",
                        wrapper: [
                          {
                            type: "xchart-wrapper", //图表标识
                            width: "100%",
                            height: "100%",
                            chartOption: {
                              type: "radar",
                              color: cc.colors.yellowHigh,
                              axis: {
                                data: [
                                  {text: '植被覆盖率', max: 100},
                                  {text: '防风固沙', max: 100},
                                  {text: '水土保持', max: 100},
                                  {text: '沙化', max: 100},
                                  {text: '石漠化', max: 100},
                                  {text: '盐渍化', max: 100}
                                ],
                                radius: '60%'
                              },
                              series: [
                                {
                                  data: [44, 60, 50, 20, 5, 0]
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    type: "wrapper",
                    height: "50%",
                    width: "100%",
                    wrapper: [
                      {
                        type: "xlabel-wrapper",
                        width: "100%",
                        icon: true,
                        labelOption: {
                          title: "生物多样性"
                        }
                      },
                      {
                        type: "wrapper",
                        width: "100%",
                        height: "100%",
                        wrapper: [
                          {
                            type: "xchart-wrapper", //图表标识
                            width: "100%",
                            height: "100%",
                            chartOption: {
                              type: "radar",
                              color: cc.colors.yellowHigh,
                              axis: {
                                data: [
                                  {text: '数量', max: 100},
                                  {text: '面积', max: 100},
                                  {text: '物种量', max: 100},
                                  {text: '植被生产力', max: 100},
                                  {text: 'NDVI', max: 100}
                                ],
                                radius: '60%'
                              },
                              series: [
                                {
                                  data: [30, 50, 40, 60, 70, 45]
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  },
}
</script>

<style lang="css" scoped src="@/components/bigScreen/css/common.css"></style>
<style lang="css" scoped src="@/components/bigScreen/css/screen.main.css"></style>
<style lang="scss" scoped>
.screen {
  ::v-deep .foot {
    height: 30px;
    box-shadow: none;
  }

  ::v-deep .foot .company {
    margin: 5px 0px;
  }
}
</style>
